/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view v-if="userInfo&&FollowSurvey&&survey">
		<view class="container">
			<view class="user_info">
				<image :src="imgUrl+'distribut/team_bg@2x.png'" role="img"></image>
				<view class="index-right">
					<navigator url="/pages/distribut/set_store/set_store" role="navigation">
						<image class="index-set" :src="imgUrl+'user/s_1.png'" role="img"></image>
					</navigator>
				</view>
				<view class="wrap"> 
					<view class="user_info_header">
						<image :src="imageError?defaultImg:userInfo.head_pic?userInfo.head_pic:defaultImg" @error="onImageError()" role="img"></image>
						<view class="details">
							<view class="details_title">{{userInfo.nickname}} </view>
							<view class="details_content">{{level?level.level_name:'无分销商等级'}}</view>
							<view class="details_time" v-if="store">开店时间:{{storeInfo.time}}</view>
							<navigator class='details_time' v-if="!store" url="/pages/distribut/set_store/set_store">创建店铺</navigator>
						</view>
					</view>
					<view class="info_data" >
						<view class="commission">
							<view class="sum">{{filter(userInfo.distribut_money)}}</view>
							<view class="writing">累计佣金</view>
						</view>
						<view class="income" v-if="FollowSurvey">
							<view class="sum">{{filter(FollowSurvey.today_income_money)}}</view>
							<view class="writing">今日收入</view>
						</view>
						<view class="total" v-if="FollowSurvey">
							<view class="sum">{{filter(FollowSurvey.goods_price_sum)}}</view>
							<view class="writing">总销售额</view>
						</view>
					</view>
				</view>
			</view>
			<view class="withdraw wrap">
				<view class="brokerage_able">
					<view class="brokerage_able_data" v-if="survey">
						<view class="data_sum">{{filter(survey.able_withdraw_money)}}</view>
						<view class="data_content">可提现佣金（元）</view>
					</view>
					<navigator class="btn" url="/pages/distribut/team_commission/team_commission" role="navigation">申请提现</navigator>
				</view>
				<view class="brokerage_success" v-if="survey">
					<view class="data_sum">{{filter(survey.withdrawing_money)}}</view>
					<view class="data_content">提现中（元）</view>
				</view>
				<view class="brokerage_success" v-if="userInfo">
					<view class="data_sum">{{filter(userInfo.distribut_withdrawals_money)}}</view>
					<view class="data_content">成功提现金额（元）</view>
				</view>
			</view>
			<view class="nav wrap clearfix">
				<view @tap.stop="distributTopages" class="nav_list" data-idx="3">
					<view class="image_box" style="background-color: #ff3d3d">
						<image class="nav_icon1" :src="imgUrl+'distribut/retail_order@2x.png'" role="img"></image>
					</view>
					<view class="nav_detail">
						<view class="nav_detail_content">团队订单</view>
						<view class="nav_detail_sum">{{FollowSurvey.order_count}}笔 </view>
					</view>
				</view>
				<navigator class="nav_detail" url="/pages/distribut/team_commission/team_commission" role="navigation">
					<view class="nav_list" style="border-right:0px">
						<view class="image_box" style="background-color: #f6a60c">
							<image class="nav_icon2" :src="imgUrl+'distribut/retail_brokerage@2x.png'" role="img"></image>
						</view>
						<navigator class="nav_detail" url="/pages/distribut/team_commission/team_commission" role="navigation">
							<view class="nav_detail_content">团队佣金</view>
							<view class="nav_detail_sum" style="color:ff3939;">￥{{FollowSurvey.distributed_money_sum}}</view>
						</navigator>
					</view>
				</navigator>
				<view @tap.stop="distributTopages" class="nav_list" data-idx="1">
					<view class="image_box" style="background-color: #3db4ff">
						<image class="nav_icon3" :src="imgUrl+'distribut/retail_control@2x.png'" role="img"></image>
					</view>
					<view class="nav_detail">
						<view class="nav_detail_content">我的下线</view>
						<view class="nav_detail_sum">{{followCount==0?'0':followCount}}人</view>
					</view>
				</view>
				<navigator class="nav_detail" url="/pages/user/withdrawals_list/withdrawals_list?type=1" role="navigation">
					<view class="nav_list" style="border-right:0px;border-bottom:0px;">
						<view class="image_box" style="background-color: #3ed126">
							<image class="nav_icon4" :src="imgUrl+'distribut/retail_withdraw@2x.png'" role="img"></image>
						</view>
						<navigator class="nav_detail" url="/pages/user/withdrawals_list/withdrawals_list?type=1" role="navigation">
							<view class="nav_detail_content">提现明细</view>
							<view class="nav_detail_sum">{{count==0?'0':count}}笔</view>
						</navigator>
					</view>
				</navigator>
			</view>
			<view class="others wrap">
				<navigator class="others_function" url="../../distribut/good_list/good_list" role="navigation">
					<image class="function_icon" :src="imgUrl+'distribut/retail_rank@2x.png'" style="width:18px;height:15px"
					 role="img"></image>
					<view class="others_content">分销商品</view>
					<image class="next_icon" :src="imgUrl+'common/xr_3.png'"  role="img"></image>
				</navigator>
				<view @tap.stop="distributSee" class="others_function">
					<image class="function_icon" :src="imgUrl+'distribut/retail_help@2x.png'" style="width:16px;height:18px"
					 role="img"></image>
					<view class="others_content">新手必看</view>
					<image class="next_icon" :src="imgUrl+'common/xr_3.png'"  role="img"></image>
				</view>
				<navigator class="others_function" url="../../distribut/poster/poster" role="navigation">
					<image class="function_icon" :src="imgUrl+'distribut/retail_cardd@2x.png'" style="width:18px;height:16px"
					 role="img"></image>
					<view class="others_content">推广海报</view>
					<image class="next_icon" :src="imgUrl+'common/xr_3.png'"  role="img"></image>
				</navigator>
			</view>
		</view>
		<!-- 公共底部 -->
		<distribut-footer :classInfo="classIndex" ref="distribut"></distribut-footer>
	</view>
</template>

<script>
	import config from "@/api/config.js";
	import distributFooter from "@/components/distributFooter/distributFooter.vue";
	import {getDistributLevel,getWithdrawalsCount,getFollowCount,getFollowSurvey,getUserInfo,getSurvey,getUserStore} from "@/api/api.js";
	import common from "@/common/common.js";
	import {mapState} from "vuex";
	const globalData=getApp().globalData//从app.vue获取用户信息
	export default {
		data() {
			return {
				classIndex:0,//0分销 1团队2账户3分销4网店
				hostUrl:config.host,//路径前缀
				imgUrl:config.imgUrl,//图片资源前缀
				store:false,
				storeInfo:"",//店铺信息
				defaultImg:config.imgUrl+"common/user68.jpg",
				userInfo:"",
				level:"",//分销等级信息
				count:"",//提现明细  几笔
				followCount:"",//下线人数
				imageError:false,//图片404
				FollowSurvey:"",//订单概况
				survey:"",//提现概况
				type:"1",// 余额提现0  佣金提现 1
			};
		},
		computed: mapState(['hasLogin','user']),
		components:{
			distributFooter
		},
		onShow(){
			
			if(this.hasLogin){
				this.userInfo=this.user;
				this.getDistributLevel()
				this.getWithdrawalsCount(this.type)
				this.getFollowCount()
				this.getFollowSurvey()
				this.getSurvey()
				this.getUserStore()
			}else{
				common.toast("none","正在重新登录中",3000)
				setTimeout(function () {
				   	uni.switchTab({
				   		url:"/pages/user/user/user"
				   	})
				}, 3000);
				
			}
		},
		methods:{
			/*分销等级信息*/ 
			getDistributLevel(){
				getDistributLevel().then(res=>{
					if(res){
						this.level=res;
					}
					console.log(res)
				})
			},
			/*用户下线人数*/ 
			getFollowCount(){
				getFollowCount().then(res=>{
					this.followCount=res;
					// console.log(res)
				})
			},
			/*保留两位小数*/
			filter(e) {
				let num = parseFloat(e).toFixed(2)
				return num;
			},
			/*用户店铺信息*/ 
			getUserStore(){
				getUserStore().then(res=>{
					if(res){
						let time=common.format(res.store_time,'yyyy-MM-dd');
						res.time=time;
						this.storeInfo=res;
						this.store=true;
					}
					console.log(res)
				})
			},
			/*订单提现*/
			getFollowSurvey(){
				getFollowSurvey().then(res=>{
					if(res){
						console.log(res)
						this.FollowSurvey=res
					}
				})
			},
			/*分销提现概况*/ 
			getSurvey(){
				getSurvey().then(res=>{
					this.survey=res;
					console.log(res)
				})
			},
			/*提现几笔*/
			getWithdrawalsCount(type){
				getWithdrawalsCount(type).then(res=>{
					this.count=res;
					console.log(res)
				})
			},
			
			/*事件方法*/
			/*用户点击下线概况*/
			distributTopages(e){
				console.log(e)
				let idx=e.currentTarget.dataset.idx;
				if(idx==3){
					uni.navigateTo({
						url:"/pages/distribut/retail_order/retail_order"
					})
				}
				if(idx==1){
					uni.navigateTo({
						url:"/pages/distribut/team_list/team_list"
					})
				}
				
			
			},
			/*新人必看*/
			distributSee(){
				uni.navigateTo({
					url:`/pages/index/webview/webview?doc_code=create_circle&type=system`
				})
				
			},
			/*图片404使用默认图片*/
			onImageError(){
				this.imageError=true;
			}
			
		}
	}
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}
.clearfix:after{
  content: '.';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  clear: both;
}
.wrap {
  box-sizing: border-box;
  width: 710rpx;
  margin: 0 auto;
  border-radius: 10rpx;
}
.user_info {
  height: 300rpx;
  color: #fff;
  position: relative;
}
/*h5 z-index设置为负数会不显示*/ 
.user_info .wrap{
	position: relative;
	z-index: 2;
}
.user_info > image {
  position: absolute;
  width: 100%;
  height: 300rpx;
  z-index: 0;
}
.user_info .user_info_header {
  height: 170rpx;
  overflow: hidden;
}
.user_info .user_info_header > image {
  width: 130rpx;
  height: 130rpx;
  border-radius: 50%;
  float:left;
  margin-top: 24rpx;
  margin-left: 20rpx;
}
.user_info .user_info_header .details {
  width: 100%;
  padding-left: 170rpx;
  margin-top: 40rpx;
}
.user_info .user_info_header .details .details_title {
  font-size: 30rpx;
  margin-bottom: 18rpx;
  height: 34rpx;
  position: relative;
}
.user_info .user_info_header .details .details_title image {
  position: absolute;
  top: 10rpx;
  left: 134rpx;
  width: 26rpx;
  height: 24rpx;
}
.user_info .user_info_header .details .details_content {
  font-size: 24rpx;
  float: left;
}
.user_info .user_info_header .details .details_time {
  float: right;
  font-size: 24rpx;
  margin-right: 190rpx;
}
.user_info .info_data > view {
  float: left;
  text-align: center;
  margin-top: 45rpx;
  box-sizing: border-box;
  width: 33.333%;
  height: 30rpx;
  border-right: 1px solid #f3f3f3;
}
.user_info .info_data > view:last-child {
  border-right: 0;
}
.user_info .info_data > view .sum {
  margin-top: -17rpx;
  height: 30rpx;
  line-height: 30rpx;
  font-size: 34rpx;
  font-weight: 600;
}
.user_info .info_data > view .writing {
  margin-top: 10rpx;
  font-size: 26rpx;
}
.withdraw {
  background-color: #fff;
  width: 710rpx;
  border-radius: 10rpx;
  margin: 0 auto;
  box-sizing: border-box;
  margin-top: 20rpx;
}
.withdraw .brokerage_able {
  height: 154rpx;
  border-bottom: 1px solid #f3f3f3;
  overflow: hidden;
  padding: 0 30rpx;
}
.withdraw .brokerage_able .brokerage_able_data {
  margin-top: 34rpx;
  float: left;
  margin-left: 10rpx;
}
.withdraw .data_sum {
  font-size: 42rpx;
  color: #ff3b3b;
  font-weight: bold;
}
.withdraw .data_content {
  font-size: 24rpx;
  color: #333333;
}
.withdraw .brokerage_able .btn {
  float: right;
  width: 130rpx;
  height: 48rpx;
  border-radius: 24rpx;
  background-color: #ff3b3b;
  color: #fff;
  font-size: 22rpx;
  line-height: 48rpx;
  text-align: center;
  margin-top: 60rpx;
  margin-right: 10rpx;
  opacity:.9;
}
.withdraw .brokerage_success {
  height: 136rpx;
  padding-left: 40rpx;
  padding-top: 22rpx;
  box-sizing: border-box;
  overflow: hidden;
  width: 50%;
  float: left;

}

.nav {
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 20rpx;
  width: 710rpx;
}
.nav .nav_list {
  float: left;
  width: 50%;
  box-sizing: border-box;
  padding-bottom: 28rpx;
  padding-top: 30rpx;
  border-right: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
  padding-left: 40rpx
}
.nav_list:nth-child(even){
  border-right: 0;
}
.nav .nav_list .nav_detail {
  margin-left: 26rpx;
  float: left;
}
.nav .nav_list .nav_detail .nav_detail_content {
  font-size: 28rpx;
  color: #333333;
  display: block;
}
.nav .nav_list .nav_detail .nav_detail_sum {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}
.nav .nav_list:nth-child(2) {

  border-right: 0;
}
.nav .nav_list:nth-child(3) {
  border-bottom: 0;
}
.nav .nav_list:nth-child(4) {

  border: 0;
}
.nav .nav_list .image_box {
  height: 64rpx;
  width: 64rpx;
  border-radius: 50%;
  float: left;
  margin-top: 6rpx;
  position: relative;
}
.nav .nav_list .image_box > image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}
.nav .nav_list .image_box .nav_icon1 {
  width: 30rpx;
  height: 34rpx;
}
.nav .nav_list .image_box .nav_icon2 {
  width: 34rpx;
  height: 36rpx;
}
.nav .nav_list .image_box .nav_icon3 {
  width: 35rpx;
  height: 41rpx;
}
.nav .nav_list .image_box .nav_icon4 {
  width: 35rpx;
  height: 34rpx;
}

.others {
  margin-top: 20rpx;
  background-color: #fff;
}
.others .others_function {
  height: 92rpx;
  border-bottom: 1px solid #f3f3f3;
  overflow: hidden;
}
.others .others_function:last-child {
  border-bottom: 0;
}
.others .others_function .others_content {
  font-size: 28rpx;
  color: #333333;
  float: left;
  margin-left: 15rpx;
  height: 100%;
  line-height: 92rpx;
}
.others .others_function .function_icon {
  float: left;
  margin-left: 20px;
  margin-top: 30rpx
}
.others .others_function .next_icon {
  float: right;
  width: 32rpx;
  height: 32rpx;
  margin-top: 30rpx;
  margin-right: 15rpx
}
.index-right{
    float: right;
    position:absolute;
    right:30rpx;
    margin-top: 20rpx;
	z-index: 3;
}
.index-set{
    width: 48rpx;
    height: 48rpx;
}

</style>
